window.onload = main;

function main() {
  const canvas = document.querySelector("#canvas");
  const ctx = canvas.getContext("2d");

  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;

  class Bar {
    constructor(x, y, width, height, color, index) {
      this.x = x;
      this.y = y;
      this.width = width;
      this.height = height;
      this.color = color;
      this.index = index;
    }

    // update(micInput) {
    //   // this.x++;
    //   // this.height = micInput;

    //   this.height = micInput * 1000;
    // }

    update(micInput) {
      const sound = micInput * 1000;
      if (sound > this.height) {
        this.height = sound;
      } else {
        this.height -= this.height * 0.07;
      }
    }

    draw1(context) {
      context.fillStyle = this.color;
      context.fillRect(this.x, this.y, this.width, this.height);
    }

    draw2(context, volume) {
      context.strokeStyle = this.color;

      ctx.save();
      context.translate(0, 0);
      context.rotate(this.index * 0.03);
      context.scale(1 + volume * 0.2, 1 + volume * 0.2);

      context.beginPath();
      // context.moveTo(this.x, this.height);
      // context.lineTo(this.x, this.y);
      context.moveTo(this.x, this.y);
      context.lineTo(this.y, this.height);
      context.stroke();
      context.strokeRect(this.y, this.height, this.height / 2, 5);

      context.restore();
    }

    draw(context, volume) {
      context.strokeStyle = this.color;

      ctx.save();
      context.translate(0, 0);
      context.rotate(this.index * 0.03);
      context.scale(1 + volume * 0.2, 1 + volume * 0.2);

      context.beginPath();
      context.bezierCurveTo(
        0,
        Math.PI * 2,
        this.height,
        this.height,
        this.x,
        this.y
      );
      context.stroke();

      context.rotate(this.index * 0.02);
      context.beginPath();
      context.arc(
        this.x + this.index * 2.5,
        this.y,
        this.height * 0.2,
        0,
        Math.PI * 2
      );
      context.stroke();

      context.restore();
    }
  }

  // const bar1 = new Bar(10, 10, 100, 200, "blue");
  let bars = [];
  let barWidth = canvas.width / 256;
  let angle = 0;

  function createBars() {
    for (let i = 0; i < 256; i++) {
      let color = `hsl(${i * 2}, 100%, 50%)`;
      // bars.push(new Bar(i * barWidth, canvas.height / 2, 1, 20, color, i));

      bars.push(new Bar(i, i * 1.5, 1, 50, color, i));
    }
  }

  createBars();

  function animate() {
    if (microphone.initialized) {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

      // bar1.update();
      // bar1.draw(ctx);

      const samples = microphone.getSamples();
      const volume = microphone.getVolume();
      angle -= 0.01 + volume * 0.5;
      // angle -= 0.01 + volume + 0.3;
      ctx.save();
      ctx.translate(canvas.width / 2, canvas.height / 2);
      ctx.rotate(angle);
      bars.forEach(function (bar, i) {
        // bar.update(i);
        bar.update(samples[i]);
        bar.draw(ctx, volume);
      });
      ctx.restore();
    }

    requestAnimationFrame(animate);
  }

  animate();
}
